<template>
	<view class="u-page">
		<card title="基础功能">
			<u-search
				v-model="value1"
				:show-action="false"
				@change="change"
			></u-search>
		</card>
		
		<card title="设置初始值">
			<u-search
				v-model="value2"
				:show-action="false"
			></u-search>
		</card>
		
		<card title="圆形搜索框">
			<u-search
				v-model="value3"
				:show-action="false"
				shape="round"
			></u-search>
		</card>
		
		<card title="方形搜索框">
			<u-search
				v-model="value4"
				:show-action="false"
				shape="square"
			></u-search>
		</card>
		
		<card title="右侧控件">
			<u-search v-model="value5" @change="handleChange" :show-action="showAction"></u-search>
		</card>
		
		<card title="禁用输入框">
			<u-search
				placeholder="输入框被禁用,可以监听点击事件进行跳转"
				disabled
				:show-action="false"
			></u-search>
		</card>
		
		<card title="点击左侧图标">
			<u-search
				v-model="value6"
				:show-action="false"
				@clickIcon="clickIcon"
			></u-search>
		</card>
		
		<card title="左对齐">
			<u-search
				v-model="value7"
				:show-action="false"
				input-align="left"
			></u-search>
		</card>
		
		<card title="居中对齐">
			<u-search
				v-model="value8"
				:show-action="false"
				input-align="center"
			></u-search>
		</card>
		
		<card title="右对齐">
			<u-search
				v-model="value9"
				:show-action="false"
				input-align="right"
			></u-search>
		</card>
		
		<card title="自定义边框和背景">
			<u-search
				v-model="value10"
				:show-action="false"
				borderColor="rgb(230, 230, 230)"
				bgColor="#fff"
			></u-search>
		</card>
		
		<card title="自定义搜索图标颜色">
			<u-search
				v-model="value11"
				:show-action="false"
				search-icon-color="#FF0000"
			></u-search>
		</card>
		
		<card title="自定义占位符颜色">
			<u-search
				v-model="value12"
				:show-action="false"
				placeholder-color="#FF0000"
			></u-search>
		</card>
		
		<card title="自定义文字颜色">
			<u-search
				v-model="value13"
				:show-action="false"
				color="#FF0000"
			></u-search>
		</card>
		
		<card title="带标签">
			<u-search
				v-model="value14"
				label="手机"
				:show-action="false"
			>
			</u-search>
		</card>
		
		<card title="自定义搜索图标">
			<u-search
				v-model="value15"
				search-icon="scan"
				:show-action="false"
			>
			</u-search>
		</card>
		
		<card title="自定义右侧插槽">
			<u-search
				placeholder="自定义右侧插槽"
				v-model="value15"
				:search-icon="false"
				:show-action="false"
			>
				<template #right>
					<u-icon name="scan" size="20"></u-icon>
				</template>
			</u-search>
		</card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value2: '天山雪莲',
				value3: '',
				value4: '',
				value5: '',
				value6: '',
				value7: '',
				value8: '',
				value9: '',
				value10: '',
				value11: '',
				value12: '',
				value13: '',
				value14: '',
				value15: '',
				showAction: false
			}
		},
		watch: {
			value1(newValue, oldValue) {
				// console.log('value1', newValue);
			}
		},
		methods: {
			handleChange(e) {
				if(this.value5.length > 0) {
					this.showAction = true
				} else {
					this.showAction = false
				}
			},
			change(e) {
				console.log(e);
			},
			clickIcon() {
				uni.$u.toast('点击了左侧图标')
			}
		}
	}
</script>

<style lang="scss">
	.u-page {}
</style>
